<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="haha">哈哈</div>
    <div class="box">
        <span>克隆node</span>
    </div>
    <script>
        // createElement 创建元素对象
        // createTextNode 创建文本对象
        const box = document.createElement('div')
        box.className = 'red'
        box.style.width = '100px'
        box.style.height = '100px'
        console.log(box);
        let text = document.createTextNode('lzw')
        console.dir(text);
        console.log(document);
        // document.appendChild 把元素添加到指定容器的末尾
        document.body.appendChild(box)
        box.appendChild(text)
        // 语法 容器.appendChild
        // document.insertBefore([新增的元素]， [指定的元素]) 把元素加到指定容器前面
        document.body.insertBefore(box, document.getElementById('haha'))


        // cloneNode(true, false) 克隆元素或节点
        let box1 = document.querySelector('.box')
        let box2 = box1.cloneNode(true) // 深克隆 (子元素和后代元素一起克隆)
        let box3 = box1.cloneNode(false) // 浅克隆 (只克隆当前)
        console.log(box2.querySelector('span').innerText = '深克隆', '第一个');
        box3.innerHTML = '<span>浅克隆node</span>'
        document.body.appendChild(box2)
        document.body.appendChild(box3)

        // 移除 removeChild
        document.body.removeChild(box2)
    </script>
</body>
<style>
    .red {
        color: blue;
        background-color: yellow;
    }
    .box {
        background-color: aquamarine;
        margin: 10px;
        width: 100px;
        height: 100px;
    }
</style>

</html>